<template>
  <q-btn stretch flat icon="notifications">
    <q-badge color="red" floating style="margin-top: 10px"> 2 </q-badge>
    <q-menu transition-show="scale" transition-hide="scale">
      <q-list>
        <q-item clickable v-close-popup>
          <q-item-section>
            <q-item-label>编辑个人资料</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="contact_phone" />
          </q-item-section>
        </q-item>
        <q-item clickable v-close-popup>
          <q-item-section>
            <q-item-label>退出</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-icon name="login" />
          </q-item-section>
        </q-item>
      </q-list>
    </q-menu>
  </q-btn>
</template>

<script lang="ts">
import { defineComponent, PropType, computed, ref, toRef, Ref } from "vue";
import { Todo, Meta } from "./models";

export default defineComponent({
  name: "Notification",
  setup() {
    return {};
  },
});
</script>
